<template>
  <div class="content_page">
    <div style="padding: 32rpx 32rpx 0">
      <div class="device_box">
        <div  class="title" :style="{ fontSize: globalFont == 'small_font' ? '32rpx' :globalFont == 'small-medium'? '38rpx':'42rpx' }">{{ datalist.equipmentName }}</div>
        <image src="/static/myInfo/icon_edit.png" @click="editModal"></image>
      </div>
    </div>
    <div class="content">
      <div class="total" :style="{ fontSize: globalFont == 'small_font' ? '32rpx' :globalFont == 'small-medium'? '38rpx':'42rpx' }">成员&nbsp;&nbsp;({{ datalist.shareNum }}人)</div>
      <!-- 滚动列表 -->
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrollData">
        <up-swipe-action :border="false" v-for="(i, k) in datalist.records" :key="k">
          <up-swipe-action-item :options="actionList" :border="false" @click="handleAction(i, $event)" ref="refAction">
            <view class="swipe-action up-border-top up-border-bottom">
              <view class="swipe-action__content">
                <!-- <image :src="i.avatar"></image> -->
                <div class="info" >
                  <div class="flex_between">
                    <div style="display: flex;align-items: center;">
                      <div class="info_nickname" :style="{ fontSize: globalFont == 'small_font' ? '32rpx' :globalFont == 'small-medium'? '38rpx':'42rpx' }">{{ i.nickname }}</div>
                      <div v-if="i.bindAccount" :class="['info_manage', globalFont]">管理员</div>
                    </div>
                    <div class="info_phone"  :style="{ fontSize: globalFont == 'small_font' ? '24rpx' :globalFont == 'small-medium'? '32rpx':'40rpx' }">{{ i.phoneNumber }}</div>
                  </div>
                </div>
              </view>
            </view>
          </up-swipe-action-item>
        </up-swipe-action>
      </scroll-view>
      <!-- <div class="shareBtn" @click="inviteFn">邀请成员</div> -->
      <button class="shareBtn" open-type="share">
        <image src="/static/myInfo/invite.png"></image>
        <text>邀请人员</text>
      </button>
    </div>
  </div>
  <div class="delModal">
    <up-modal :show="showModal" title="提示" :content="currentIndex == 0 ? '您确定要移交管理吗' : '您确定要删除该成员吗'
      " @confirm="confirmModal" showCancelButton="true" @cancel="showModal = false"></up-modal>
    <!-- 编辑分类 -->
  </div>
  <div class="editModal">
    <up-modal :show="showEditModal" title="设备名称" showCancelButton="true" @confirm="confirmChange"
      @cancel="showEditModal = false">
      <view class="slot-content">
        <up-input placeholder="请输入设备名称" border="bottom" v-model="deviceName" input-align="left"
          style="width: 100%"></up-input>
      </view>
    </up-modal>
  </div>
</template>
<script setup lang="ts">
import { ref,getCurrentInstance} from "vue";
import { onLoad, onReachBottom, onShareAppMessage } from "@dcloudio/uni-app";
import type {
  shareUserType,
  resInfo,
  shareUserRes,
} from "@/api/myInfo/type.ts";
import {
  shareListFn,
  transferFn,
  DeltransferFn,
  editDeviceName,
} from "@/api/myInfo/myInfo.ts";
import Equipment from "./equipment.vue";
const actionList = [
  {
    text: "移交管理",
    style: {
      backgroundColor: "#f9b63c",
    },
  },
  {
    text: "删除",
    style: {
      backgroundColor: "#C92A2A",
    },
  },
];
// 列表数据
const form = ref({
  equipmentId: "",
  pageNo: 1,
  pageSize: 10,
});
const datalist = ref<shareUserType>();
const getData = () => {
  // datalist.value = {
  //   equipmentName: '测试机21',
  //   records: [
  //     {
  //       id: 1,
  //       userName: '张三',
  //       userPhone: '123456789',
  //       shareNum:2,
  //     }
  //   ]
  // }
  // return
  shareListFn({
    equipmentId: form.value.equipmentId,
    pageNo: form.value.pageNo,
    pageSize: form.value.pageSize,
  })
    .then((res: shareUserRes) => {
      if (res.resultStatus) {
        datalist.value = res.resultData;
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    });
};
onReachBottom(() => {
  form.value.pageNo = form.value.pageNo + 1;
  getData();
});
onShareAppMessage(() => {
  const currentTime = new Date().toISOString(); // 获取当前时间，格式为ISO 8601
  const timestamp = new Date(currentTime).getTime();
  return {
    title: '驱走蚊虫 守卫健康',
    path: `/pages/index/index?equipmentId=${form.value.equipmentId}&timestamp=${currentTime}` // 路径，传递参数到指定页面。
  }
})
// ------操作------
const currentIndex = ref(null);
const actionData = ref({
  shareId: "",
  accountId: "",
});
const handleAction = (i: any, index: any) => {
  currentIndex.value = index.index;
  actionData.value.shareId = i.shareId;
  actionData.value.accountId = i.accountId;
  showModal.value = true;
};
const showModal = ref(false);
const confirmModal = () => {
  if (currentIndex.value == 0) {
    // 移除
    transferFn({
      shareId: actionData.value.shareId,
    })
      .then((res: any) => {
        if (res.resultStatus) {
          uni.showToast({
            title: "移交绑定人成功",
            icon: "none",
          });
          getData();
        } else {
          uni.showToast({
            title: res.errorMessage,
            icon: "none",
          });
        }
      })
      .catch((err: any) => {
        uni.showToast({
          title: "服务器异常",
          icon: "none",
        });
      });
  } else if (currentIndex.value == 1) {
    // 删除
    DeltransferFn({
      shareId: actionData.value.shareId,
      accountId: actionData.value.accountId,
    })
      .then((res: any) => {
        if (res.resultStatus) {
          uni.showToast({
            title: "删除成功",
            icon: "none",
          });
          getData();
        } else {
          uni.showToast({
            title: res.errorMessage,
            icon: "none",
          });
        }
      })
      .catch((err: any) => {
        uni.showToast({
          title: "服务器异常",
          icon: "none",
        });
      });
  }
  showModal.value = false;
};
// 编辑设备名称
const showEditModal = ref(false);
const deviceName = ref("");
const editModal = () => {
  showEditModal.value = true;
  deviceName.value = datalist.value.equipmentName;
};
const confirmChange = () => {
  editDeviceName(form.value.equipmentId, {
    equipmentName: deviceName.value,
  })
    .then((res: any) => {
      if (res.resultStatus) {
        uni.showToast({
          title: "操作成功",
        });
        getData();
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    })
    .finally(() => {
      showEditModal.value = false;
    });
};
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onLoad((options) => {
  const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
  form.value.equipmentId = options?.equipmentId;
  getData();
});
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content_page {
  background-color: #f8f8f8;
  height: calc(100vh - 88rpx);
  overflow: hidden;

  .content {
    background-color: #fff;
    height: 100%;
  }

  .device_box {
    width: 686rpx;
    height: 160rpx;
    background: url("/static/myInfo/management_details_BJ.png");
    background-size: cover;
    position: relative;
    margin-bottom: 32rpx;

    .title {
      // font-size: 36rpx;
      font-weight: bold;
      text-align: left;
      color: #ffffff;
      line-height: 50rpx;
      position: absolute;
      top: 54rpx;
      left: 60rpx;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      top: 56rpx;
      right: 28rpx;
    }
  }

  .total {
    padding: 32rpx;
    // font-size: 32rpx;
    text-align: left;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .scroll-Y {
    height: calc(100vh - 620rpx);
    overflow: auto;
    background-color: #fff;
  }

  .shareBtn {
    width: 686rpx;
    height: 88rpx;
    border: 2rpx solid #006d56;
    border-radius: 16rpx;
    text-align: center;
    line-height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx auto;

    text {
      color: #006d56;
    }

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 20rpx;
    }

    .info {
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      color: #006d56;
    }
  }
}

.u-page {
  padding: 0;
}

.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 30rpx 30rpx 30rpx 50rpx;
    border: none;
    display: flex;
    align-items: center;

    image {
      width: 92rpx;
      height: 92rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
    }

    .info {
      width: 600rpx;

      &_nickname {
        // font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }

      &_phone {
        color: #999999;
        // font-size: 24rpx;
        margin-left: 80rpx;
      }

      &_manage {
        width: 120rpx;
        height: 40rpx;
        // font-size: 29rpx;
        margin-left: 10rpx;
        background: #fef7eb;
        color: #f9b63c;
        text-align: center;
        line-height: 40rpx;
        border-radius: 4rpx;
      }
    }

    &__text {
      // font-size: 15px;
      color: #333;
      padding-left: 30rpx;
    }
  }
}

.up-border-top {
  border-top: none;
}
</style>
